<template>
  <view class="container">
    <view style="font-weight: bold; font-size: 30rpx; color: #001636">充值卡</view>
    <input type="text" class="ipt" placeholder="请输入充值卡编号" v-model="card_sn" />
    <view class="btn" @click="cartopup">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card_sn: ''
    };
  },
  methods: {
    // 充值卡充值
    cartopup() {
      if (!/^[0-9]{8}$/.test(this.card_sn)) {
        return uni.showToast({
          title: '输入的充值卡号不正确',
          icon: 'none'
        });
      }
      this.http('/user/recharge', {
        card: 1,
        card_sn: this.card_sn
      }).then((res) => {
        if (res.code == 1) {
          this.http('/user/userRechargePay', {
            user_recharge_id: res.data.user_recharge_id
          }).then((res) => {
            uni.showToast({
              title: '充值成功'
            });
          });

          this.card_sn = '';
        }
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  box-sizing: border-box;
  padding: 34rpx 28rpx;
  .ipt {
    box-sizing: border-box;
    width: 694rpx;
    height: 100rpx;
    background: #f6f6f6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 1rpx solid #e2e2e2;
    padding: 28rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #666666;
    margin-top: 28rpx;
  }
  .btn {
    width: 654rpx;
    height: 92rpx;
    background: #3483f6;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    line-height: 92rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-left: 20rpx;
    margin-top: 134rpx;
  }
}
</style>
